<template>
	<view class="shouyiTZ">
		<view class="top">
			<view class="myshouru">
				我的收入（元）
			</view>
			<view class="jine">
				{{jianglijine}}
			</view>
			<view class="tupian">
				<image @click="tixianBtn" class="img" src="../../static/user/tixianBtn.png" mode=""></image>
			</view>
		</view>
		<view class="tabdaohang">
			<view class="left" :class="xuanzys" @click="shouyiBtn">
				收益记录
			</view>
			<view class="right" :class="xiaxian" @click="yaoqingBtn">
				我的邀请
			</view>
		</view>

		<view v-if="yaoqingshow" class="jilu" v-for="item in dataList">
			<view class="left">
				<image class="img" :src="item.avatarUrl" mode=""></image>
				<text class="name">{{item.nickName}} {{item.phone}}</text>
			</view>
			<view class="right">
				<text class="name">已赚取</text>
				<text class="jinea">{{item.flowingMoney}}</text>
				<text class="name">元</text>
			</view>
		</view>

		<view v-if="!yaoqingshow" class="jilu" v-for="item in dataxiaxian">
			<view class="left">
				<image class="img" :src="item.userDO.avatarUrl" mode=""></image>
				<text class="name">{{item.userDO.nickname}} {{item.userDO.phone}}</text>
			</view>
			<view class="right">
				<text class="name">{{formatDate(item.userDO.gmtCreate) }}</text>
			</view>
		</view>
		<image @click="fenxiangBtn" class="hongbao" src="https://laileme123.oss-cn-shanghai.aliyuncs.com/bg/%E7%AB%8B%E5%8D%B3%E8%BF%9B%E5%85%A520%25.gif" mode=""></image>
		<!-- <image @click="fenxiangBtn" class="fenxiang" src="../../static/user/fenxiang.png" mode=""></image> -->
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex';

	export default {
		components: {

		},
		data() {
			return {
				yaoqingshow: true,
				dataxiaxian: [],
				xuanzys: 'xuanzhong',
				xiaxian: 'chushi',
				userInfotz: {},
				canshu: {
					userId: '',
					pageNo: 1,
					limit: '1000',
				},
				dataList: [],
				jianglijine: 0
			}
		},
		onShow() {
			this.userInfotz = uni.getStorageSync('userInfo')
			this.jianglijine = this.userInfotz.reward
			console.log('this.jianglijine', this.jianglijine)
			this.canshu.userId = this.userInfotz.id
			this.chauxn()
			this.getxinxi()

		},

		onLoad() {

		},

		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			formatDate(date) {
			  var date = new Date(date);
			  var YY = date.getFullYear() + '-';
			  var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			  var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			  var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			  var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			  var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
			  return YY + MM + DD +" "+hh + mm + ss;
			},
			//邀请
			yaoqingBtn() {
				console.log('邀请')
				this.xuanzys = 'chushi'
				this.xiaxian = 'xuanzhong'
				this.yaoqingshow = false
				this.getxiaxian()
			},
			//收益点击
			shouyiBtn() {
				console.log('收益点击')
				this.xuanzys = 'xuanzhong'
				this.xiaxian = 'chushi'
				this.yaoqingshow = true
				this.getxinxi()
			},
			//分享
			fenxiangBtn() {
				console.log('分享')

				uni.navigateTo({
					url: '/pages/user/haibaofenx'
				})
			},
			//我的下线
			getxiaxian() {
				var that = this
				that.$api.request('activity', 'invitationList', this.canshu, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					if (res.errno == '200') {
						if (res.data) {
							this.dataxiaxian = res.data
						}
					}
				})
			},
			//我的收益
			chauxn() {
				var obj = {}
				obj.userId = this.userInfotz.id
				var that = this
				that.$api.request('user', 'getUserInfo', obj, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					if (res.errno == '200') {
						if (res.data) {
							that.jianglijine = res.data.reward
						}


					}
				})

			},
			getxinxi() {

				var that = this
				that.$api.request('user', 'myselfChiefReward', this.canshu, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					if (res.errno == '200') {
						if (res.data) {
							this.dataList = res.data.items
							if (this.dataList) {
								for (var i = 0; i < this.dataList.length; i++) {
									this.dataList[i].phone = this.dataList[i].phone.substr(0, 3) + "****" + this.dataList[i].phone.substr(7);
								}
							}

						}


					}
				})
			},

			//体现
			tixianBtn() {
				console.log('tixian')
				uni.navigateTo({
					url: '/pages/user/tixianyei'
				})
			}


		}
	}
</script>
<style lang='scss' scoped>
	.shouyiTZ {
		width: 750rpx;
		height: 100%;

		.hongbao {
			width: 200rpx;
			height: 200rpx;
			position: fixed;
			right: 36rpx;
			bottom: 250rpx;
		}

		.fenxiang {
			width: 84rpx;
			height: 88rpx;
			position: fixed;
			right: 90rpx;
			bottom: 200rpx;
		}

		.jilu {
			width: 710rpx;
			height: 108rpx;
			background: #F2F2F2;
			border-radius: 8rpx;
			margin-left: 20rpx;
			margin-bottom: 5rpx;
			padding-left: 16rpx;
			padding-right: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.right {
				display: flex;
				height: 108rpx;
				align-items: center;

				.jinea {
					font-size: 30rpx;
					color: #36B542;
					font-weight: 600;
				}

				.name {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

			}

			.left {
				display: flex;
				height: 108rpx;
				align-items: center;

				.name {
					margin-left: 16rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}

				.img {
					width: 60rpx;
					height: 60rpx;
					border-radius: 100%;
				}
			}
		}

		.tabdaohang {
			width: 750rpx;
			height: 60rpx;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			padding-left: 20rpx;
			padding-right: 20rpx;
			display: flex;
			align-items: center;

			.xuanzhong {
				color: #FFFFFF;
				background: #6DD400;
			}

			.chushi {
				background-color: #F0F0F0;
				color: #666660;
			}

			.right {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				width: 356rpx;
				height: 60rpx;
				border-radius: 0px 30rpx 30rpx 0px;
			}

			.left {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 354rpx;
				height: 60rpx;
				border-radius: 30rpx 0px 0px 30rpx;
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;

			}
		}

		.wodshouyi {

			padding-left: 20rpx;
			background-color: #FFFFFF;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 100rpx;
		}

		.top {
			width: 750rpx;
			padding-bottom: 20rpx;
			background-color: #68C628;

			.tupian {
				margin-top: 16rpx;
				text-align: center;

				.img {
					width: 100rpx;
					height: 44rpx;
				}
			}

			.jine {
				margin-top: 16rpx;
				text-align: center;
				font-size: 60rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 84rpx;
			}

			.myshouru {
				text-align: center;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

		}
	}
</style>
